/**
 * 复制运费模板
 */

import React, { useState, useEffect } from 'react';
import CommonModal from '@/components/CommonModal';
import { Form, message, Select, Tooltip } from 'antd';
import CommonLoading from '@/components/CommonLoading';
import { queryExpresslist, queryNetworklist } from '../../service';

const { Option } = Select;

export const layout = {
  //发布表单排布
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};

const CopyFreightTemplate = ({ visible, handleOk, handleCancel }) => {
  const [form] = Form.useForm();

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]); //快递下拉数据
  const [networkData, setNetworkData] = useState([]); //网点下拉数据
  const [expressId, setExpressId] = useState(''); //选中的快递id

  const onOk = () => {
    form.validateFields().then((val) => {
      handleSubmit(val);
    });
  };

  useEffect(() => {
    if (visible) {
      form.resetFields();
      getExpressList();
    }
  }, [visible]);

  useEffect(() => {
    if (expressId) {
      getNetworkList();
    }
  }, [expressId]);

  useEffect(() => {
    if (networkData.length > 0) {
      form.setFieldsValue({
        networkId: networkData[0].id,
      });
    }
  }, [networkData]);

  //获取快递列表
  const getExpressList = async () => {
    setLoading(true);
    const { success, data } = await queryExpresslist({
      type: 5,
    });
    setLoading(false);
    if (success) {
      setData(data);
    }
  };

  //获取网点列表
  const getNetworkList = async () => {
    setLoading(true);
    const { success, data } = await queryNetworklist({
      type: 5,
      expressId: expressId,
    });
    setLoading(false);
    if (success) {
      setNetworkData(data);
    }
  };

  //选择快递
  const handleSelectExpress = (e) => {
    setExpressId(e);
  };

  const handleSubmit = () => {
    form
      .validateFields()
      .then((val) => {
        const { networkId } = val;
        handleOk(networkId);
      })
      .catch((err) => {});
  };

  const onCancel = () => {
    handleCancel();
    setData([]);
  };

  const options = data.map((v) => (
    <Option key={v.id} label={v.name} value={v.id}>
      <Tooltip title={v.name}>{v.name}</Tooltip>
    </Option>
  ));

  const networkOptions = networkData.map((v) => (
    <Option key={v.id} label={v.name} value={v.id}>
      <Tooltip title={v.name}>{v.name}</Tooltip>
    </Option>
  ));

  return (
    <CommonModal
      title="复制运费模板"
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={500}
      okText="确定复制"
    >
      <p style={{ marginLeft: '42px', marginBottom: '16px' }}>
        将复制以下快递的运费模板
      </p>
      <Form
        form={form}
        {...layout}
        name="copy-freight-template"
        layout="horizontal"
      >
        <Form.Item
          label="选择快递"
          name="expressId"
          rules={[{ required: true, message: '请选择快递' }]}
        >
          <Select
            onChange={handleSelectExpress}
            placeholder="请选择快递"
            showSearch
            optionFilterProp="label"
          >
            {options}
          </Select>
        </Form.Item>
        <Form.Item
          label="选择网点"
          name="networkId"
          rules={[{ required: true, message: '请选择网点' }]}
        >
          <Select
            disabled={!expressId}
            placeholder="请选择网点"
            showSearch
            optionFilterProp="label"
          >
            {networkOptions}
          </Select>
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default CopyFreightTemplate;
